import styled from 'styled-components';
import React, { useState } from 'react';


export interface ImageBoxProps {
    url: string;
    width?: number;
    height?: number;
}

export const ImageBox: React.FC<ImageBoxProps> = (props) => {

    const [width, setWidth] = useState<number>(props.width ? props.width : 120);

    const [height, setHeight] = useState<number>(props.height ? props.height : 120);

    return (
        <Container style={{
            width: `${width}px`,
            height: `${height}px`,
        }}>
            <Image src={props.url}></Image>
        </Container>
    );
}

const Container = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    padding: 2px;
`;

const Image = styled.img`
    max-height: 100%;
    max-width: 100%;
`;